<!--
 * @Author       : xiangmin
 * @File         : 表单项封装
 * @Date         : 2023-07-06 19:15:46
 * @LastEditors  : xiangmin
 * @LastEditTime : 2024-09-19 09:57:31
-->
<!-- eslint-disable -->
<template>
	<component
		v-if="render"
		:is="render({ model, submit, getField })"
	/>

	<slot
		v-else-if="type === 'slot'"
		:name="field"
	/>

	<template v-else>
		<a-form-item v-bind="formItemProps">
			<h3
				v-if="type === 'title'"
				v-bind="fieldProps"
			>
				{{ field }}
			</h3>
			<component
				v-if="renderField"
				:is="renderField({ model, submit, getField })"
			/>
			<a-input
				v-if="type === 'input'"
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<a-input-number
				v-if="type === 'inputNumber'"
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<a-textarea
				v-if="type === 'textarea'"
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<a-date-picker
				v-if="type === 'date'"
				allowClear
				inputReadOnly
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<a-range-picker
				v-if="type === 'dateRange'"
				v-model:value="model[field]"
				inputReadOnly
				v-bind="fieldProps"
			/>
			<c-range-picker
				v-if="type === 'cDateRange'"
				v-model:startDate="model[field[0]]"
				v-model:endDate="model[field[1]]"
				v-bind="fieldProps"
			/>
			<a-time-picker
				v-if="type === 'time'"
				allowClear
				inputReadOnly
				valueFormat="HH:mm:ss"
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<a-time-range-picker
				v-if="type === 'timeRange'"
				allowClear
				inputReadOnly
				valueFormat="HH:mm:ss"
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<a-switch
				v-if="type === 'switch'"
				v-model:checked="model[field]"
				v-bind="fieldProps"
			/>
			<a-checkbox-group
				v-if="type === 'checkboxGroup'"
				v-model:value="model[field]"
				:options="options"
				v-bind="fieldProps"
			/>
			<a-radio-group
				v-if="type === 'radioGroup'"
				v-model:value="model[field]"
				:options="options"
				v-bind="fieldProps"
			/>
			<a-select
				v-if="type === 'select'"
				allowClear
				v-model:value="model[field]"
				:options="options"
				v-bind="fieldProps"
			/>
			<a-tree-select
				v-if="type === 'treeSelect'"
				allow-clear
				v-model:value="model[field]"
				:treeData="options"
				v-bind="fieldProps"
			/>
			<a-cascader
				v-if="type === 'cascader'"
				allowClear
				v-model:value="model[field]"
				:options="options"
				v-bind="fieldProps"
			/>
			<a-slider
				v-if="type === 'slider'"
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<a-rate
				v-if="type === 'rate'"
				v-model:value="model[field]"
				v-bind="fieldProps"
			/>
			<c-upload-img
				v-if="type === 'uploadImg'"
				v-model:list="model[field]"
				v-bind="fieldProps"
			/>
			<input-tag
				v-if="type === 'inputTag'"
				v-model="model[field]"
				:fieldProps="fieldProps"
			/>
		</a-form-item>
	</template>
</template>

<script setup lang="ts">
// @ts-nocheck
import CRangePicker from './CRangePicker.vue'
import InputTag from './InputTag.vue'

const props = defineProps<{
	submit?: Function
	fieldItem: FormFields[0]
	model: Record<string, any>
	getField?: Function
}>()

const { getField, submit, model } = props
const { type, field, query, render, label, renderField } = props.fieldItem
let { fieldProps = {}, formItemProps = {} } = props.fieldItem

/**
 * 设置表单项formItemProps
 */
formItemProps = typeof formItemProps === 'function' ? formItemProps({ model }) : formItemProps
if (formItemProps) {
	formItemProps.label = label?.toString()
	formItemProps.name = field?.toString()
}

/**
 * 设置表单项fieldProps
 */
fieldProps = typeof fieldProps === 'function' ? fieldProps({ getField, submit, model }) : fieldProps

/**
 * 设置异步获取表单项的
 */
const options = ref([])
async function setOptions() {
	if (query) {
		// @ts-ignore
		options.value = await query()
	}
}
setOptions()
</script>
